<template>
  <div class="list">
    <el-transfer
      v-model="rightValue"
      style="text-align: left; display: inline-block"
      filterable
      :left-default-checked="[2, 3]"
      :right-default-checked="[1]"
      :titles="['所有数据', '已经添加']"
      :button-texts="['To left', 'To right']"
      :format="{
        noChecked: '${total}',
        hasChecked: '${checked}/${total}',
      }"
      :data="data"
      @change="handleChange"
    >
      <template #default="{ option }">
        <div>
          <div></div>
          <div>{{ option.key }}--{{ option.label }}</div>
        </div>
      </template>
      <template #left-footer>
        <el-button class="transfer-footer" size="small">默认显示</el-button>
      </template>
      <template #right-footer>
        显示类型：<el-select
          v-model="value"
          class="m-2"
          placeholder="Select"
          size="small"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-button class="transfer-footer" size="small">设置</el-button>
      </template>
    </el-transfer>
    <!-- <el-scrollbar class="my-scroll-bar">
    </el-scrollbar> -->
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";

const checked1 = ref(true);
const tableHeaders = defineProps({
  tableHeaderList: Array,
});

const generateData = () => {
  const data = [];
  for (let i = 1; i <= 15; i++) {
    data.push({
      key: i,
      label: `Option ${i}`,
      // disabled: i % 4 === 0,
    });
  }
  return data;
};
const data = ref(generateData());
const rightValue = ref([1]);
const value = ref("");

const options = [
  {
    value: "轮显",
    label: "轮显",
  },
  {
    value: "键显",
    label: "键显",
  },
];
const handleChange = (value, direction, movedKeys) => {
  // console.log(value, direction, movedKeys)
};
const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
  },
  {
    date: "2016-05-08",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
  },
  {
    date: "2016-05-06",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
  },
  {
    date: "2016-05-07",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
  },
];
</script>

<style lang="scss" scoped>
.list {
  width: 1000px;
  :deep(.el-transfer__buttons) {
    padding: 8px 15px;
    .el-transfer__button {
      display: block;
      width: 85px;
    }
    .el-transfer__button:nth-child(2) {
      margin: 10px 0 0 0;
    }
  }
  :deep(.el-transfer-panel) {
    width: auto;
    .el-select {
      width: 60px;
    }
  }
}
</style>
